<template>
	<view>
		<view class="content">
			<view :style="statusBar"></view>
			<!-- 正文内容 -->
			<view class="top" :style="margin">
				<image :src="zt_bg.top_bg" mode="widthFix"></image>
			</view>
			<view class="center">
				<!-- 导购三标栏 -->
				<view class="cen-top">
					<image :src="zt_bg.dh_bg" mode="widthFix"></image>
					<view class="y y1" :style="zt_bg.bgc"></view>
					<view class="y y2" :style="zt_bg.bgc"></view>
				</view>
				<!-- 二维码 -->
				<view class="cen-cen">
					<image :src="ewm" :show-menu-by-longpress="true"></image>
				</view>
				<view>
					<view class="cen-bottom" :style="zt_bg.topbtn_sls" @click="jump">领红包点外卖</view>
				</view>

			</view>
			<view class="bottom">
				<view class="btn flex justify-between">
					<view :style="zt_bg.bombtn1_sls" @click="share_img_click">分享赚钱</view>
					<view :style="zt_bg.bombtn2_sls" @click="cp_clipboard">复制文案</view>
				</view>
				<view class="bttext u-font-14">
					注意事项:<br />
					1.无论美团新老用户，每个手机号每天均可领一次，红包金额随机发放；<br />
					2.美团绑定的手机号，需与领券登录的手机号一致；<br />
					3.下单后第二天上午10点会有订单返现提醒<br />
				</view>
			</view>
		</view>

		<share-hb :bgImg="appInfo.poster_bg" :ewmImg="ewm" :isshow="isshow_share"
			@cloose_share_img="clooseShare" v-if="isshow_share"></share-hb>
	</view>
</template>

<script>
	import shareHb from '../../components/share_hb2/share_hb2.vue'
	import navBarHeight from '../../mixin/navBarHeight.js'
	
	export default {
		components:{
			shareHb
		},
		mixins:[
			navBarHeight
		],
		data() {
			return {
				isshow_share: false,
				ewm:'',
				maPath:'',//小程序路径
				actId:'4',
				zt_bg:{
					bgc: 'background-color:#5ddd24',
					top_bg: '../../static/meituan1_bg_hb.jpeg',
					dh_bg: '../../static/meituan1_ydl.jpg',
					topbtn_sls: 'background-color: #32b766;color: #fff;',
					bombtn1_sls: 'color: #9e7b45;background-image: linear-gradient( #fdf0c3,#f7c882);',
					bombtn2_sls: 'color: #45a61b;background-color: #fff;',
				}
			}
		},
		computed: {
			appInfo() {
				return this.$store.state.appInfo
			}
		},
		mounted() {
			this.getactivi()
		},
		methods: {
			//打开分享图文
			share_img_click() {
				this.isshow_share = true
			},
			// 关闭
			clooseShare() {
				this.isshow_share = false
			},
			// 复制到剪切板
			cp_clipboard() {
				uni.setClipboardData({
					data: this.appInfo.share_content_meituan,
					success: function() {
						uni.showToast({
							title: '内容已复制'
						})
						console.log('剪切板内容设置成功');
					}
				});
			},
			// 数据请求
			getactivi() {

				if (!this.ewm) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					const that = this
					let data = {
						actId: this.actId
					}
					this.$http.cps.get_meituan_sc(data)
						.then(res => {
							that.$set(that, 'ewm', res.data.macode_url)
							that.$set(that, 'maPath', res.data.maPath)
							uni.hideLoading()
							console.log('美团获取二维码', ewmSrc);
						})
					
				}

			},
			//小程序跳转
			jump() {
				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					path: this.maPath
				})
				console.log('我点击了跳转');
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.top {
			width: 750rpx;

			image {
				width: 100%;
				vertical-align: bottom;
			}
		}

		.center {
			background-color: #fff;
			width: 650rpx;
			margin: 0 auto;
			padding-bottom: 50rpx;
			border-radius: 20rpx;
			text-align: center;

			.cen-top {
				padding: 20rpx;
				border-bottom: dashed 1px rgba($color: #ccc, $alpha: 1);
				position: relative;

				image {
					width: 100%;
				}

				.y {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					bottom: 0;
					border-radius: 50%;
				}

				.y1 {
					left: 0;
					transform: translate(-50%, 50%);
				}

				.y2 {
					right: 0;
					transform: translate(50%, 50%);
				}

			}

			.cen-cen {
				margin: 40rpx 0 20rpx;

				image {
					width: 340rpx;
					height: 340rpx;
				}
			}

			.cen-bottom {
				width: 520rpx;
				margin: 10rpx auto 0;
				font-size: 35rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 100rpx;
			}


		}

		.bottom {
			width: 650rpx;
			margin: 30rpx auto 0;
			padding-bottom: 100rpx;

			.btn {
				view {
					width: 47%;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
					letter-spacing: 4rpx;
					border-radius: 10rpx;
				}

			}

			.bttext {
				color: #fff;
				line-height: 50rpx;
				margin-top: 40rpx;
				

				text {
					color: rgb(236, 76, 21);
				}
			}
		}
	}
</style>
